import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import { connect } from "react-redux";
import {
    getPayConfigList,
    bindConfigStore,
    deleteConfigStore,
    getPaymentGlobalConfig
} from "@sagas/payment";
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
import ModifyModeModal from "@components/payment/modal/ModifyModeModal";
import BindWechatAccountModal from "@components/payment/modal/BindWechatAccountModal";
import BindAlipayAccountModal from "@components/payment/modal/BindAlipayAccountModal";
import DoubleCheck from "@common/presentational/DoubleCheck";
import { PAYMENT_GLOBAL_CONFIG } from '@constants/PaymentStatus'
import BilinIcon from "@common/presentational/BilinIcon";
@withRouter
@connect(({ payment }) => ({
    payConfigStoreList: payment.payConfigStoreList,
    payGlobalConfig: payment.payGlobalConfig,
}), {
    getPayConfigList,
    bindConfigStore,
    deleteConfigStore,
    getPaymentGlobalConfig
})

class PaymentConfigPage extends PureComponent {
    constructor(props) {
        super(props);
        const { type } = getQuery(props.history)
        this.state = {
            type: type || 2,
        }
        this.tableRef = React.createRef();
        this.modifyModeModalRef = React.createRef()
        this.bindWechatAccountModalRef = React.createRef()
        this.bindAlipayAccountModalRef = React.createRef()

        this.getTableInfo = this.getTableInfo.bind(this)
        this.getGlobalConfig = this.getGlobalConfig.bind(this)
        this.modifyMode = this.modifyMode.bind(this)

        this.paginationInfo = {}
        this.columns = [{
            key: 'store_name',
            dataIndex: 'store_name',
            title: '场景订单',
        }, {
            key: 'account',
            dataIndex: 'account',
            title: '收款账号',
            render:( text, record) => record.account ? record.account.name : ''
        }, {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            render: (text, record) => {
                return (
                    <div className="flex-vertical-center">
                        {record.account ?
                            <DoubleCheck title="是否确认解绑"
                                onClick={this.deleteAccount.bind(this, record)}
                            >
                                <div className="mgr-8 ft-hover">解绑</div>
                            </DoubleCheck> :
                            <div onClick={this.bindAccount.bind(this, record)} className="mgr-8 ft-hover">绑定</div>}
                    </div>
                )
            }
        }]
    }

    componentDidMount(){
        this.getGlobalConfig()
    }

    getGlobalConfig(){
        const { getPaymentGlobalConfig } = this.props
        getPaymentGlobalConfig()
    }

    deleteAccount(record){
        const { type } = this.state
        this.props.deleteConfigStore({
            store_id:record.store_id,
            pay_type: type
        },()=>{
            this.getTableInfo()
        })
    }

    bindAccount(record) {
        const { type } = this.state
        if(type === 2){
            this.bindWechatAccountModalRef.current?.show({
                ...record
            })
        }
        if(type === 3){
            this.bindAlipayAccountModalRef.current?.show({
                ...record
            })
        }
    }

    modifyMode() {
        const { payGlobalConfig } = this.props
        this.modifyModeModalRef.current?.show({
            type: payGlobalConfig.config,
            stores: payGlobalConfig.stores
        })
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    setUrlQuery() {
        const { history } = this.props
        const { type } = this.state
        let params = {
            type
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { type } = this.state
        this.props.getPayConfigList({
            payType: type,
            pageNo: current,
            pageSize,
        })
        this.setUrlQuery()
    }

    handleClick(type) {
        this.setState({
            type
        }, this.initTable)
    }

    render() {
        const { type } = this.state
        const { payConfigStoreList, payGlobalConfig } = this.props
        return (
            <div className='payment-config-page'>
                <div className="table-scroll-container" >
                    <div className='payment-global flex-row-between'>
                        <div className='ft-clr-d'>
                            当前模式: {PAYMENT_GLOBAL_CONFIG[payGlobalConfig.config || 0]}
                        </div>
                        <div onClick={this.modifyMode} className='clr-green cur-poi'>
                            修改
                        </div>
                    </div>
                    <div className="payment-mode-line">
                        <div className={`payment-mode${type === 2 ? ' active' : ''}`}
                            onClick={this.handleClick.bind(this, 2)}
                        >
                            <div className='left-box'>
                                <BilinIcon type="wechat" className='ft-40 ft-clr-l' />
                            </div>
                            <div>
                                <div className="payment-mode-name ft-16">微信小程序</div>
                                <div className="payment-mode-intro ft-12">应用于微信小程序的资金结算</div>
                            </div>
                        </div>
                        <div className={`payment-mode${type === 3 ? ' active' : ''}`}
                            onClick={this.handleClick.bind(this, 3)}
                        >
                            <div className='left-box'>
                                <BilinIcon type="alipay" className='ft-40 ft-clr-l'  />
                            </div>
                            <div>
                                <div className="payment-mode-name ft-16">支付宝小程序</div>
                                <div className="payment-mode-intro ft-12">应用于支付宝小程序的资金结算</div>
                            </div>
                        </div>
                    </div>
                    <CustomizeTableProvide ref={this.tableRef} tableKey="payment-config" onChange={this.getTableInfo}>
                        <div className="table-list">
                            <CustomizeTable
                                columns={this.columns}
                                dataSource={payConfigStoreList.stores || []}
                                pagination
                            />
                        </div>
                        <div className="table-pagination">
                            <CustomizeTablePagination
                                total={payConfigStoreList.total}
                            />
                        </div>
                    </CustomizeTableProvide>
                </div>
                <ModifyModeModal ref={this.modifyModeModalRef} callback={this.getGlobalConfig} />
                <BindAlipayAccountModal ref={this.bindAlipayAccountModalRef} callback={this.getTableInfo} />
                <BindWechatAccountModal ref={this.bindWechatAccountModalRef} callback={this.getTableInfo} />
            </div>
        )
    }
}

export default PaymentConfigPage